<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :beforeClose="closePrint"
      :visible.sync="dialogVisible7"
      width="980px">
      <div style="height:100%;background: #fff;min-height: 300px" id="print-div" v-loading="loading">
          <img :src="printSrc" v-if="printSrc"/>
      </div>
<!--      <div style="padding:40px 30px 100px 30px;box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);" v-if="formPrint.isSpecialSupplier == 1 && (formPrint.sendType == '运联发货' || formPrint.sendType == '自提') ">-->
<!--        <div style="height:100%;background: #fff" id="print-div">-->
<!--          <div class="title" style="text-align: center;font-size:24px;font-weight: bold;color:#000">委托书</div>-->
<!--          <div class="paper-top" style="line-height:28px;font-size:14px;background: #fff;width:80%;margin:20px auto">-->
<!--            <div>因我公司业务需要，特此委托：{{formPrint.supplierName}}</div>-->
<!--            <div class="good-table2">-->
<!--              <table cellspacing="0" cellpadding="0" border="0" width="100%" style="">-->
<!--                <tr>-->
<!--                  <th align="center" style="">产品名称</th>-->
<!--                  <th align="center" style="">数量(吨)</th>-->
<!--                  <th align="center" style="">包装(KG/包)</th>-->
<!--                </tr>-->
<!--                <tr v-for="item in formPrint.goodsList">-->
<!--                  <td align="center"><div class="td-con">{{item.goodsName}} / {{item.goodsSn}}</div></td>-->
<!--                  <td align="center" style="width:100px"><div class="td-con" >{{item.takeNum}}吨</div></td>-->
<!--                  <td align="center" style="width:100px;"><div class="td-con">{{item.goodsWeight}}</div></td>-->
<!--                </tr>-->
<!--              </table>-->
<!--            </div>-->
<!--            <div>货物将于{{formPrint.takeTime | formatTime}}送往{{formPrint.receiveAddress}}，{{ formPrint.receiverName }}，{{ formPrint.receiverMobile }}</div>-->
<!--            <div style="text-align: right;margin-top:40px">{{newTime}}</div>-->
<!--            <img :src="formPrint.imageUrl" style="float:right;margin-top:-100px;width: 156px;"/>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div style="padding:40px 30px 100px 30px;box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);" v-else>-->
<!--        <div style="height:100%;background: #fff" id="print-div" v-if="(formPrint.sendType == '运联发货' && formPrint.billType == 'saleOrder' &&  formPrint.purchaseOrderSn != '') || (formPrint.sendType == '自提'&& formPrint.billType == 'saleOrder' && formPrint.purchaseOrderSn != '') || (formPrint.billType == 'purchaseOrder' && formPrint.sendType == '运联发货' && formPrint.purchaseOrderSn != '')">-->
<!--          <div class="title" style="text-align: center;font-size:24px;font-weight: bold;color:#000">提货单</div>-->
<!--          <div class="paper-top" style="line-height:28px;font-size:14px;background: #fff;margin-top:20px">-->
<!--            <div class="good-table">-->
<!--              <table cellspacing="0" cellpadding="0" border="0" width="100%" class="tihuotable" style="">-->
<!--                <tr>-->
<!--                  <td align="center" class="th"><div class="td-div" style="width:200px">提货单位</div></td>-->
<!--                  <td align="center" colspan="4"><div class="td-div" style="font-weight: bold">{{formPrint.supplierName}}</div></td>-->
<!--                </tr>-->
<!--                <tr>-->
<!--                  <Td colspan="5">我司将于 {{formPrint.takeTime | formatTime }} 派车辆前往贵司指定仓库提货，请予协助办理。具体信息如下：</Td>-->
<!--                </tr>-->
<!--                <tr>-->
<!--                  <td align="center" class="th"><div class="td-div">司机姓名</div></td>-->
<!--                  <td align="center" colspan="2">-->
<!--                    <div class="td-div">-->
<!--                      {{formPrint.driverName}}<br/>{{formPrint.driverIdNumber}}-->
<!--                    </div>-->
<!--                  </td>-->
<!--                  <td align="center" class="th"><div class="td-div">内部合同</div></td>-->
<!--                  <td align="center"><div class="td-div"></div></td>-->
<!--                </tr>-->
<!--                <tr>-->
<!--                  <td align="center" class="th"><div class="td-div">提货车牌</div></td>-->
<!--                  <td align="center" colspan="2">-->
<!--                    <div class="td-div">{{formPrint.driverCardNo}}</div>-->
<!--                  </td>-->
<!--                  <td align="center" class="th"><div class="td-div">司机手机</div></td>-->
<!--                  <td align="center" colspan="2"><div class="td-div"><span v-if="checked">{{formPrint.driverMobile}}</span></div></td>-->
<!--                </tr>-->
<!--                <tr>-->
<!--                  <td colspan="5" style="height:8px"></td>-->
<!--                </tr>-->
<!--                <tr>-->
<!--                  <td align="center" class="th" ><div class="td-div">商品名称</div></td>-->
<!--                  <td align="center" class="th" style="width:100px;"><div class="td-div">包装</div></td>-->
<!--                  <td align="center"  class="th" style="width:100px;"><div class="td-div">提货数量（吨）</div></td>-->
<!--                  <td align="center" class="th" ><div class="td-div">是否含托盘</div></td>-->
<!--                  <td align="center" class="th"><div class="td-div">备注</div></td>-->
<!--                </tr>-->
<!--                <tr v-for="item in formPrint.goodsList">-->
<!--                  <td align="center"><div class="td-con">{{item.goodsName}} / {{item.goodsSn}}</div></td>-->
<!--                  <td align="center" style="white-space:nowrap;"><div class="td-con" >{{item.goodsWeight}} kg/包</div></td>-->
<!--                  <td align="center" style="white-space:nowrap;"><div class="td-con">{{item.takeNum}}</div></td>-->
<!--                  <td align="center"><div  class="td-con">{{item.isHasTray ? '是' : '否'}}</div></td>-->
<!--                  <td align="center" ><div class="td-con" style="max-width:150px">{{item.goodsRemark}}</div></td>-->
<!--                </tr>-->
<!--                <tr>-->
<!--                  <td align="center" class="th"><div class="td-div">备注</div></td>-->
<!--                  <td align="center" colspan="4">-->
<!--                    <div class="td-div">-->
<!--                      <div>{{formPrint.takeRemark}}</div>-->
<!--                      <div v-for="item in formPrint.changeCarNoList">{{item.msg}}</div>-->
<!--                    </div>-->
<!--                  </td>-->
<!--                </tr>-->
<!--              </table>-->
<!--            </div>-->
<!--            <div style="margin-top:80px;text-align: right;">{{formPrint.fromCompany}}</div>-->
<!--            <div style="text-align: right">{{newTime}}</div>-->
<!--            <img :src="formPrint.imageUrl" style="float:right;margin-top:-100px;width: 156px;"/>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div style="height:100%;background: #fff" id="print-div" v-else-if="formPrint.sendType =='工厂仓库' && formPrint.billType == 'saleOrder' && formPrint.supplierName.indexOf('平顶山') == -1 ">-->
<!--          <div class="title" style="text-align: center;font-size:24px;font-weight: bold;color:#000">委托书</div>-->
<!--          <div class="paper-top" style="line-height:28px;font-size:14px;background: #fff;width:80%;margin:20px auto">-->
<!--            <div>因我公司业务需要，特此委托：{{formPrint.supplierName}}</div>-->
<!--            <div class="good-table2">-->
<!--              <table cellspacing="0" cellpadding="0" border="0" width="100%" style="">-->
<!--                <tr>-->
<!--                  <th align="center" style="">产品名称</th>-->
<!--                  <th align="center" style="">数量(吨)</th>-->
<!--                  <th align="center" style="">包装(KG/包)</th>-->
<!--                  <th align="center" style="">备注</th>-->
<!--                </tr>-->
<!--                <tr v-for="item in formPrint.goodsList">-->
<!--                  <td align="center"><div class="td-con">{{item.goodsName}} / {{item.goodsSn}}</div></td>-->
<!--                  <td align="center" style="width:100px"><div class="td-con" >{{item.takeNum}}吨</div></td>-->
<!--                  <td align="center" style="width:100px;"><div class="td-con">{{item.goodsWeight}}</div></td>-->
<!--                  <td align="center" style="width:100px;"><div class="td-con">{{item.goodsRemark}}</div></td>-->
<!--                </tr>-->
<!--              </table>-->
<!--            </div>-->
<!--            <div>货物将于{{formPrint.takeTime | formatTime}}送往{{formPrint.receiveAddress}}，{{ formPrint.receiverName }}，{{ formPrint.receiverMobile }}</div>-->
<!--            <div style="text-align: right;margin-top:40px">{{newTime}}</div>-->
<!--            <img :src="formPrint.imageUrl" style="float:right;margin-top:-100px;width: 156px;"/>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div style="height:100%;background: #fff;overflow: hidden;width:560px;margin:0 auto" id="print-div" v-else-if="formPrint.sendType =='工厂仓库' && formPrint.billType == 'saleOrder' && formPrint.supplierName.indexOf('平顶山') != -1">-->
<!--          <div class="title" style="text-align: center;font-size:24px;font-weight: bold;color:#000">委托书</div>-->
<!--          <div class="paper-top" style="line-height:30px;font-size:16px;background: #fff;width:80%;margin:20px auto">-->
<!--            <div>{{formPrint.supplierName}}：</div>-->
<!--            <div style="text-indent: 24px">-->
<!--              我{{formPrint.fromCompany}}委托：<span style="text-decoration: underline">{{formPrint.driverName}}</span>，身份证号码：<span style="text-decoration: underline">{{formPrint.driverIdNumber}}</span>，司机手机：<span style="text-decoration: underline">{{formPrint.driverMobile}}</span>，-->
<!--              车牌：<span style="text-decoration: underline">{{formPrint.driverCardNo}}</span>,于{{formPrint.takeTime | formatTime}}提<span v-for="(item,index) in formPrint.goodsList"><span style="font-weight: bold"> {{item.takeNum}} </span>吨{{item.goodsName}}{{item.goodsSn}}<span v-if="index < formPrint.goodsList.length -1"> / </span></span>。-->
<!--              望贵公司办理。-->
<!--            </div>-->
<!--            <div style="text-align: center;float:right;width:300px;position: relative;margin-top:40px;padding-bottom:70px;">-->
<!--              <img :src="formPrint.imageUrl" style="position: absolute;right:23%;width:156px;"/>-->
<!--              <div>{{formPrint.fromCompany }}</div>-->
<!--              <div>盖章</div>-->
<!--              <div style="">{{newTime}}</div>-->
<!--            </div>-->

<!--          </div>-->
<!--        </div>-->
<!--        <div style="height:100%;background: #fff" id="print-div" v-else-if="(formPrint.sendType == '自提'&& formPrint.billType == 'saleOrder' && formPrint.purchaseOrderSn == '') || (formPrint.billType == 'purchaseOrder' && formPrint.sendType == '运联发货' && formPrint.purchaseOrderSn == '') || formPrint.sendType == '运联发货' && formPrint.billType == 'saleOrder' &&  formPrint.purchaseOrderSn == ''">-->
<!--          <div class="title" style="text-align: center;font-size:24px;font-weight: bold;color:#000">提货通知单</div>-->
<!--          <div class="paper-top" style="line-height:28px;font-size:14px;background: #fff;margin:20px auto;width:80%;padding-bottom:50px">-->
<!--            <div>{{formPrint.warehouseName}}:</div>-->
<!--            <div style="margin-top:10px;text-indent:25px">我司将于{{formPrint.takeTime | formatTime}}派车辆至贵司仓库提货，请予协助。具体信息如下：</div>-->
<!--            <div class="good-table2">-->
<!--              <table cellspacing="0" cellpadding="0" border="0" width="100%" style="">-->
<!--                <tr>-->
<!--                  <th align="center" style="">物料名称</th>-->
<!--                  <th align="center" style="">数量(吨)</th>-->
<!--                  <th align="center" style="">包装(KG/包)</th>-->
<!--                  <th align="center" style="">备注</th>-->
<!--                </tr>-->
<!--                <tr v-for="item in formPrint.goodsList">-->
<!--                  <td align="center"><div class="td-con">{{item.goodsName}} / {{item.goodsSn}}</div></td>-->
<!--                  <td align="center" style="width:100px"><div class="td-con" >{{item.takeNum}}</div></td>-->
<!--                  <td align="center" style="width:100px;"><div class="td-con">{{item.goodsWeight}}</div></td>-->
<!--                  <td align="center" style="width:100px;">-->
<!--                    <div class="td-con">{{item.goodsRemark}}</div>-->
<!--                  </td>-->
<!--                </tr>-->
<!--              </table>-->
<!--            </div>-->
<!--            <div style="padding-left:25px;font-weight: bold;">-->
<!--              <div>车号：{{formPrint.driverCardNo}}</div>-->
<!--              <div v-if="formPrint.changeCarNoList.length > 0" style="font-weight: 400">备注： <span v-for="item in formPrint.changeCarNoList">{{item.msg}}</span></div>-->
<!--              <div style="font-weight: 400">特此说明！</div>-->
<!--            </div>-->
<!--            <div style="text-align: right;margin-top:40px;position: relative;padding-right: 50px;">-->
<!--              <div style="position: absolute;top: -67px;right: 98px;z-index: 0;">-->
<!--                <img :src="formPrint.imageUrl" style="width:156px;"/>-->
<!--              </div>-->
<!--              <div style="padding-right:109px;position: relative;z-index: 1">提货公司章：</div>-->
<!--              <div style="position: relative;z-index: 1"><span style="letter-spacing: 44px;">日</span>期：{{newTime}}</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" size="small" @click="download">下载</el-button>
        <el-button type="primary" size="small" @click="printdiv">打印</el-button>
        <el-button type="primary" size="small" @click="showPop">编辑地址</el-button>
        <el-button type="primary" size="small" @click="resetImg">重新生成</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="地址修改"
      :visible.sync="dialogVisible"
      width="450px">
      <div style="height:100%;background: #fff;" >
           <el-form :model="form" size="mini" label-width="80px"  :rules="rules" ref="form">
             <el-form-item label="收货地址" prop="receiveAddress">
               <el-input v-model="form.receiveAddress" placeholder="请输入" clearable type="textarea" :rows="2"></el-input>
             </el-form-item>
          </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button  size="small" @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" size="small" @click="sumAddress" :loading="btnLoading2">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import "@/utils/jQuery.print"
import {getPrintImage,getPrintContent,editReceiveAddress} from '@/api/order'
import {formatDate} from '@/utils/date';
import {mapGetters} from "vuex";

export default {
  name: "printdischarging",
  data(){
    return {
      formPrint:{},
      checked:false,
      dialogVisible7:false,
      isMergeGoods:false,
      billId:'',
      btnLoading:false,
      printSrc:'',
      loading:false,
      form:{
        receiveAddress:''
      },
      dialogVisible:false,
      btnLoading2:false,
      rules:{
        receiveAddress:[{required: true, message: '此项必填', trigger: 'blur'},],
      },
    }
  },

  computed: {
    newTime() {
      let date = new Date();
      return formatDate(date, 'yyyy年MM月dd日')
    },
  },

  filters:{
    formatTime(time) {
      if(time){
        let date = new Date(time);
        return formatDate(date, 'yyyy年MM月dd日')
      }
    },
  },

  created() {

  },

  methods:{
    resetImg(){
      let data = {};
      data.receiveAddress = this.formPrint.receiveAddress;
      data.billId = this.billId
      editReceiveAddress(data).then(()=>{
        getPrintImage({billId:this.billId}).then((res)=>{
          this.printSrc = res;
          this.loading = false
        }).catch(()=>{
          this.loading = false
        })
      })
    },
    showPop(){
      this.dialogVisible = true;
      this.form.receiveAddress = this.formPrint.receiveAddress
    },
    sumAddress(){
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.btnLoading2 = true;
          let data = JSON.parse(JSON.stringify(this.form));
          data.billId = this.billId
          editReceiveAddress(data).then((res)=>{
            this.btnLoading2 = false;
            this.dialogVisible = false;
            this.$emit('update')
            getPrintContent({billId:this.billId}).then((res)=>{
              this.formPrint = res;
            })
            getPrintImage({billId:this.billId}).then((res)=>{
              this.printSrc = res;
              this.loading = false
            }).catch(()=>{
              this.loading = false
            })
          }).catch(()=>{
            this.btnLoading2 = false;
          })
        }
      })
    },
    download() {
      let image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function() {
        let canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        let context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
        let a = document.createElement("a"); // 生成一个a元素
        let event = new MouseEvent("click"); // 创建一个单击事件
        a.download = '单据'; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = this.printSrc;
    },


    changeMerger(){
      getPrintContent({billId:this.billId}).then((res)=>{
        this.formPrint = res;
      })
    },
    //显示打印弹窗
    showPrint(billId,checked){
      this.dialogVisible7 = true;
      this.checked = checked ? true : false;
      this.isMergeGoods = false;
      this.billId = billId
      this.btnLoading = false
      if(billId){
        this.loading = true
        this.printSrc = ''
        getPrintImage({billId:this.billId}).then((res)=>{
          this.printSrc = res;
          this.loading = false
        }).catch(()=>{
          this.loading = false
        })
      }
      if(billId){
        getPrintContent({billId:this.billId}).then((res)=>{
          this.formPrint = res;
        })
      }
    },
    //关闭打印弹窗
    closePrint(){
      this.dialogVisible7 = false;
    },

    //打印
    printdiv(){
      $("#print-div").print({
        globalStyles:true,//是否包含父文档的样式，默认为true
        mediaPrint:true,//是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
        stylesheet:null,//外部样式表的URL地址，默认为null
        noPrintSelector:".no-print",//不想打印的元素的jQuery选择器，默认为".no-print"
        iframe:true,//是否使用一个iframe来替代打印表单的弹出窗口，true为在本页面进行打印，false就是说新开一个页面打印，默认为true
        append:null,//将内容添加到打印内容的后面
        prepend:null,//将内容添加到打印内容的前面，可以用来作为要打印内容
        deferred: $.Deferred()//回调函数
      });
    },

  },
}
</script>

<style scoped lang="scss">
    .chexing-con{
      .chexing-title{
          font-weight: bold;
          font-size:14px;
          margin-bottom:10px;
      }
      .chexing-item-list{
        overflow: hidden;
        .chexing-item{
          display: inline-block;
          width:80px;
          height:30px;
          line-height: 30px;
          background: #eee;
          text-align: center;
          color:#666;
          margin-right:10px;
          margin-bottom:10px;
          cursor: pointer;
        }
        .chexing-item.choose{
          background: #f56c6c;
          color:#fff
        }

      }
    }
    .good-table2{
      margin:10px 0;
      table{
        border-left:1px solid #aaa;
        border-bottom:1px solid #aaa;
        th{
          font-weight: normal;
          font-size:14px;
          border-top:1px solid #aaa;
          padding:5px 10px;
          line-height: 20px;
          border-right:1px solid #aaa;
          background: #f2f2f2;
        }
        td{
          font-weight: normal;
          border-right:1px solid #aaa;
          border-top:1px solid #aaa;
          padding:5px 10px;
          line-height: 20px;
        }
        .td-con{
          word-break:break-all;
          font-size:12px;
        }
      }
    }

    #print-div{
      font-size:14px;
      font-family: "Microsoft YaHei";
      color:#000;
      position: relative;
      .title{
        font-size:28px;
        font-weight: bold;
        text-align: center;
        line-height: 40px;
      }
      .paper-top{
        margin-top:20px;
        line-height: 20px;
      }
      .good-table{
        margin-top:0px;
        table{
          border-left:1px solid #aaa;
          border-bottom:1px solid #aaa;
          td,th{
            font-weight: normal;
            border-right:1px solid #aaa;
            border-top:1px solid #aaa;
            padding:5px 10px;
            line-height: 20px;
          }
        }
      }
      .paper-bottom{
        margin-top:0px;
        line-height: 20px;
      }
      .tihuotable{
        border-left:1px solid #aaa;border-bottom:1px solid #aaa;
        td{
          height: 40px;
        }
        .td-div{
          line-height: 18px;
        }
        .th{
          border-top:1px solid #aaa;background: #f2f2f2;white-space:nowrap;width:160px;
        }
      }
    }
</style>
